<template>
	
	<view class="video" v-for="item in list" :key="item.id">

		<view class="top">
			<view class="topLeft">
				<img class="img" :src="item.image" alt="">
			</view>
			<view class="topMidle">
				<view class="title">
					{{item.name}}
				</view>
				<view class="row2">
					<view class="time">
						{{item.time}}
					</view>
					<view>
						<img class="icon" src="./static/img/05.png" alt="">
					</view>
					<view class="favoriteNum">
						{{item.favoriteNum.split(" ")[2]}}
					</view>
				</view>
				<view class="type">
					
					{{item.type ? item.type:"无"}}
				</view>
			</view>
			<view class="topRight">
				<button class="btn1" @click="buyNow(item)">立即购买</button>
				<button class="btn1" @click="addCart(item)" >加入购物车</button>
			</view>
		</view>
		<view class="bottom">
			<p><span class="reason">推荐理由：</span>
				<span class="txt">{{item.reason}} </span>
			</p>
		</view>
		
	</view>
	<view class="loadMore">
		<view v-if="loading" class="info">加载中...</view>
		<view v-else-if="finished" class="info">没有更多数据</view>
		<view v-else class="button1" @click="loadMore()">加载更多</view>
	</view>
	<view style="min-height: 100px"></view>
</template>

<script>
	import {
		post
	} from '@/lib/index.js'
	// import post from '@/lib/post.js';
	export default {
		data() {
			return {
				list: [], // 电影列表
				pageNo: 0, // 页数
				pageSize: 3, // 页距
				loading: false, // 是否加载
				finished: false, // 是否全部加载
			}
		},
		onLoad() {
			
			// 页面加载的什么周期
			this.getList()
		},
		methods: {
			async getList() {
				// 获取电影列表
				this.loading = true
				let data = await post('/list/movie', {
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					sort: {
						createTime: -1
					}, // 创建时间越早的排在前面
				})
				this.loading = false
				if (!data.success) {
					return uni.showModal({
						content: data.message
					})
				}
				const finished = data.result.list.length < this.pageSize // 如果当前拉取的数据个数小于pageSize，说明拉取完成
				this.finished = finished
				this.list = [...this.list, ...data.result.list] // 追加数据
				if (this.finished === false){
					this.pageNo++
					this.getList()
				}
			},
			loadMore() {
				// 加载更多
				this.pageNo++
				this.getList()
			},
			async addCart(item){
				let data = await post('/detail/movieCart',{
					search:{movieId:item.id}
				})
				if(data.success){
					const old = data.result
					 data = await post('/modify/movieCart',{id:old.id,count:old.count+1})
				}else{
					let data = await post('/create/movieCart',{
						movieId:item.id,
						count:1
					})
					
					if(!data.success){
						return uni.showModal({content:data.message})
					}
				}
				uni.$emit('refreshCartList')
			    uni.showModal({content:'加入购物车成功'})
			},
			async buyNow(item){
				const params = {
				  fee:50, // 总价
				  list:[{count:1,movieId:item.id}]
				};
				const data = await post('/create/movieOrder', params);
				if (!data.success) {
				  return uni.showModal({ content: data.message });
				}
				uni.$emit('refreshOrderList')
				uni.showModal({content:'已经成功加入订单'})
			}
			
			
		},
	}
</script>

<style>
	.video {
		padding: 6px 0;
		margin: 0 10px;
		border-bottom: 1px solid #ccc;
	}

	.top {
		display: flex;
	}

	.title {
		font-size: 18px;
		font-weight: 500;
	}

	.topMidle {
		width: 120px;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}

	.row2 {
		font-size: 12px;
		display: flex;
	}

	.time,
	.favoriteNum,
	{
	color: #555;
	}

	.icon {
		width: 16px;
		height: 16px;
	}

	.type {
		margin-bottom: 10px;
		color: #555;
		font-size: 14px
	}

	.btn1 {
		font-size: 14px;
		color: #fff;
		background-color: #fb7299;
		width: 84px;
		height: 32px;
		border-radius: 4px;
		margin-left: 60px;
		margin-top: 4px;
		margin-bottom: 4px;
	}

	.topRight {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.img {
		width: 70px;
		height: 93px;
		border-radius: 4px;
		margin-right: 10px;
	}

	.reason {
		color: #fb7299;
		font-weight: 500;
		font-size: 14px;
	}

	.bottom .txt {
		font-size: 14px;
		color: #4c4c4c;

	}

	.bottom {
		width: 100%;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
	.loadMore {
	  display: flex;
	  flex-direction: row;
	  justify-content: center;
	  margin: 10px 0;
	}
	.info {
	  font-size: 12px;
	  color: gray;
	}
	.button1 {
	  border: 1px dashed #d3d3d3;
	  width: 80px;
	  height: 30px;
	  font-size: 12px;
	  border-radius: 4px;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  color: gray;
	}
</style>